<template>
	<div class="hello-sass">
		<div class="test-box">
			<div class="test1">
				使用变量
				<span>123</span>
			</div>
			<div class="test2">
				嵌套规则
				<span>123</span>
			</div>
		</div>
		<bg-border class="cont-bg" :width="1320" :height="668">
			<div class="hy-lcont6">
				<h2 class="chart-title">>> 本月热点事项办结TOP10</h2>
				<ul class="top10-list">
					<li v-for="(top10Item, index) in top10Data" :key="index">
						<div class="icon-num"></div>
						<p class="text">{{top10Item.text}}</p>
						<div class="bar-box">
							<div class="bar-num">{{top10Item.num}}</div>
						</div>
					</li>
				</ul>
			</div>
		</bg-border>
	</div>
</template>

<script>
	import bgBorder from "@/components/common/bgBorder/BgBorder.vue";
	export default {
		name: 'HelloSass',
		data() {
			return {
				top10Data: [
					{text: '税收政策咨询', num: 38},
					{text: '重大事项审批', num: 34},
					{text: '项目证照办理', num: 33},
					{text: '居民证件申领', num: 30},
					{text: '服务质量监督', num: 29},
					{text: '服务质量投诉', num: 26},
					{text: '交通行政审批', num: 24},
					{text: '社会投诉受理', num: 21},
					{text: '工商税务证照', num: 18},
					{text: '公安司法咨询', num: 16},
				]
			}
		},
		components: {
			bgBorder
		}
	}
</script>

<style lang="scss" scoped>
	/*
		vue中sass安装与使用
		npm install node-sass
		npm install sass-loader
		style加lang="scss"
	*/
	
	/*------------------------------------------------------------------------------------------------------------------------------------------
		变量定义与使用
		6种数据类型：字符串、数字、颜色值、布尔值、列表（需要结合sass list function 使用）、null 值
	*/
	// 定义
	$url: "~@/assets/img/mod-rank01.png";
	$opacity: 0.8;
	$text-color: #cecece;
	$liColor: #f5ad1b,#5f89ce,#94bf45,#da8ec5,#78bfc2,#bec278;
	// 使用
	.test1{
		background: url($url) no-repeat 50% 50%;
		opacity: $opacity;
		color: $text-color;
		span{
			// 使用定义的数组（ nth(数组，下标)，这里下标从1开始 ）
			color: nth($liColor,1)
		}
	}
	/*------------------------------------------------------------------------------------------------------------------------------------------
		运算符：
		ps：如果不希望变量在css中做运算处理可将变量外包裹 #{} 如：#{变量}（差值语句）
		差值语句：通过 #{} 插值语句可以在选择器或属性名中使用变量：
		
		数字运算：+, -, *, /, %
		关系运算：<, >, <=, >=, ==, !=
		布尔运算：与或非：and, or, not
		改变运算顺序：()
	*/
   /*------------------------------------------------------------------------------------------------------------------------------------------
		流程控制：
		条件判断： @if
		循环：@for、@each、@while
   */
	// @if:	条件判断
	@if(true){
		color: #f99;
	}
	// @if @else if:
	@if(true){
		color: #f99;
	}@else if(true){
		color: #f00;
	}@else{
		color: #fff;
	}
	
	// @for  限制的范围内循环 @for $var from <start> to <end>    |    @for $var from <start> through <end>
	// to: 包头不包尾    through: 包头包尾
	@for $i from 1 to 5 {
		// 实际循环4次： 1~4
		// 结合内部nth()方法  可遍历列表    nth($list, $i) | nth(列表, 下标)
	}
	@for $i from 1 through 5 {
		// 实际循环5次： 1~5
	}
	
	// @while 循环直到表达式返回结果为 false
	$i: 10;
	@while ($i < 0){
		$i: $i-1;
	}
	
	// @each 遍历list      指令的格式是 @each $var in <list>
	@each $i in 1,2,3 {
		// 循环$i的顺序则是1，2，3
	}
	
	/*------------------------------------------------------------------------------------------------------------------------------------------
		混合指令 @mixin
		可带参数，可不带参数
	*/
	// 定义混合
	@mixin name {
		// ...
	}
	@mixin name($i) {
		// $i   ...
	}
	// 使用混合
	html{
		@include name;
		@include name(#f99);
	}
	
	/*------------------------------------------------------------------------------------------------------------------------------------------
		函数指令 @function
	*/
	// 定义
	@function rem($px){
		@return $px/100;
	}
	html{
		// 调用
		font-size: rem(16px);
	}
	/*------------------------------------------------------------------------------------------------------------------------------------------
		继承指令 @extend
	*/
	.class1{
		font-size: 100px;
	}
	.class2{
		// 样式从class1继承
		@extend .class1;
	}
	
	/*------------------------------------------------------------------------------------------------------------------------------------------
		导入 scss文件
	*/
	// 导入 abc.scss 文件
	@import "abc";
	
	/*------------------------------------------------------------------------------------------------------------------------------------------
		嵌套规则
	*/
	// 通过空格连接（伪类选择器无法使用），标识符：&（可用于伪类选择器）
	.test2{
		span{
			color: #FF0000;
			&:hover{
				color: #DA8EC5;
			}
			&:nth-last-of-type(1){
				font-size: 30px;
			}
			body.ie & {
				color: #FF9999;
			}
		}
	}
	
	// 群组选择器的嵌套  css中以逗号分隔的选择器（并联选择器）
	// sass
	nav, aside {
	  a {color: blue}
	}
	// css
	nav a, aside a {color: blue}
	
	// 子选择器和同层选择器：>、+和~;
	/*
		> :
		article > section { border: 1px solid #ccc }
		子组合选择器> 选择article元素的直接子元素section
		
		+ :
		header + p { font-size: 1.1em }
		同层相邻组合选择器+选择header元素后紧跟的p元素
		
		~ :
		article ~ a { border-top: 1px dashed #ccc }
		同层全体组合选择器~，选择所有跟在article后的同层a元素
		
	*/
	// sass
	article {
		// 选择 article 下的直接子元素section
		> section { background: #eee }
		dl > {
			// 选择dl下的直接子元素dt | 选择dl下的直接子元素dd
			dt { color: #333 }
			dd { color: #555 }
		}
		// 同层级 选择nav紧跟着的article元素
		nav + & { margin-top: 0 }
		// 同层级选择所有紧跟着的a元素
		~ a { border-top: 1px dashed #ccc }
	}
	// css
	article ~ article { border-top: 1px dashed #ccc }
	article > footer { background: #eee }
	article dl > dt { color: #333 }
	article dl > dd { color: #555 }
	nav + article { margin-top: 0 }
	
	// 嵌套属性;
	// sass
	nav {
	  border: {
	  style: solid;
	  width: 1px;
	  color: #ccc;
	  }
	}
	// css
	nav {
	  border-style: solid;
	  border-width: 1px;
	  border-color: #ccc;
	}
	// -----------------
	// sass
	nav {
		border: 1px solid #ccc {
			left: 0px;
			right: 0px;
		}
	}
	// css
	nav {
		border: 1px solid #ccc;
		border-left: 0px;
		border-right: 0px;
	}
	
	
	
	
	
	
	
	/* =========================================================================== */
	.cont-bg{
		margin: 66px auto;
	}
	.hello-sass{
		color: #FFFFFF;
		width: 100%;
		height: 10000px;
		background: url(~@/assets/img/bg.png) no-repeat;
		background-size: 100% 100%;
		.hy-lcont6 {
			position: relative;
			width: 100%;
			height: 100%;
			.chart-title {
				padding-top: 24px;
				padding-left: 76px;
				font-size: 26px;
				// background-image: linear-gradient(0deg,#0080FF,#00C5E4);
				// -webkit-background-clip:text;
				color: #00C5E4;
			}
			.top10-list{
				margin: 44px 100px 0 106px;
				li{
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-bottom: 16px;
					.icon-num{
						width: 25px;
						height: 30px;
					}
					.text{
						flex: 1;
						padding-left: 16px;
						font-size: 24px;
						color: #BEE4F8;
						white-space:nowrap;
						overflow:hidden;
						text-overflow:ellipsis;
					}
					.bar-box{
						width: 820px;
						height: 36px;
						line-height: 36px;
						background-color: #162951;
						.bar-num{
							box-sizing: border-box;
							width: 0;
							overflow: hidden;
							transition: all .3s;
							height: 100%;
							padding: 0 20px;
							float: right;
							text-align: right;
							font-size: 24px;
							color: #FFFFFF;
						}
					}
					
					// 定义 宽度进度和背景色 样式代码块
					@mixin setCW($c, $w) {
						background-color: $c;
						width: $w
					}
					// 定义 背景图片样式 代码块
					@mixin setBgImg($img) {
						background-image: url($img);
						background-repeat: no-repeat;
						background-size: 100% auto;
					}
					&:nth-of-type(1){;
						.icon-num{@include setBgImg('~@/assets/img/mod-rank01.png')}
						.bar-num{@include setCW(#A71F2F, 95%)}
					}
					&:nth-of-type(2){;
						.icon-num{@include setBgImg('~@/assets/img/mod-rank02.png')}
						.bar-num{@include setCW(#953F36, 90%)}
					}
					&:nth-of-type(3){;
						.icon-num{@include setBgImg('~@/assets/img/mod-rank03.png')}
						.bar-num{@include setCW(#955237, 85%)}
					}
					&:nth-of-type(4){;
						.icon-num{@include setBgImg('~@/assets/img/mod-rank04.png')}
						.bar-num{@include setCW(#EA8C20, 80%)}
					}
					&:nth-of-type(5){;
						.icon-num{@include setBgImg('~@/assets/img/mod-rank05.png')}
						.bar-num{@include setCW(#EAAD1C, 75%)}
					}
					&:nth-of-type(6){;
						.icon-num{@include setBgImg('~@/assets/img/mod-rank06.png')}
						.bar-num{@include setCW(#C5B841, 70%)}
					}
					&:nth-of-type(7){;
						.icon-num{@include setBgImg('~@/assets/img/mod-rank07.png')}
						.bar-num{@include setCW(#78C541, 65%)}
					}
					&:nth-of-type(8){;
						.icon-num{@include setBgImg('~@/assets/img/mod-rank08.png')}
						.bar-num{@include setCW(#50B568, 60%)}
					}
					&:nth-of-type(9){;
						.icon-num{@include setBgImg('~@/assets/img/mod-rank09.png')}
						.bar-num{@include setCW(#41C5A2, 55%)}
					}
					&:nth-of-type(10){;
						.icon-num{@include setBgImg('~@/assets/img/mod-rank10.png')}
						.bar-num{@include setCW(#4BB2BA, 50%)}
					}
				}
			}
		}
	}
</style>